<!--
 * @Description: 打样单单品卡片,详情见《我的打样记录》
 * @Author: acexu 578599619@qq.com
 * @Date: 2024-11-02 10:51:05
 * @LastEditors: acexu 578599619@qq.com
 * @LastEditTime: 2024-11-25 14:30:21
 * @FilePath: /xp-platform-mobile/sheep/components/f-print-singleGoods-card/f-print-singleGoods-card.vue
 * @demoPic: 
-->
<template>
	<view
		class="print"
		v-for="item in goodsList"
		:key="item.id"
		v-show="goodsList.length > 0"
		@click="getCurrentItem(item)"
	>
		<view class="head">
			<view class="code">打样编号：{{ item.no }}</view>
			<view class="time">{{ moment(item.createTime).format('YYYY-MM-DD HH:mm:ss') }}</view>
		</view>
		<view class="line" />
		<view class="body">
			<image class="goodsPic" :src="item.thumbnailUrl" />
			<view class="box">
				<view class="mid">
					<!-- 	<view class="name">
						{{ item.name }}
					</view> -->
					<view class="code">
						{{ item.no }}
					</view>
				</view>
				<view class="footer">
					<view class="spce">{{ item.printType }}</view>
					<view class="num">数量：x{{ item.count }}</view>
				</view>
			</view>
		</view>
	</view>
	<f-empty
		v-show="!goodsList.length"
		:icon="emptyConfig.icon"
		:text="emptyConfig.text"
		:showAction="emptyConfig.showAction"
		:actionText="emptyConfig.actionText"
	/>
</template>

<script setup>
	import moment from 'moment';
	import dataEmpty from '@/static/empty/data-empty.png';
	import { ref, reactive } from 'vue';
	const emit = defineEmits();
	const props = defineProps({
		goodsList: {
			type: Array,
			default: () => {
				return [];
			},
		},
	});
	const goodsImg = ref('./../../../static/common/goodsPic.png');
	const emptyConfig = reactive({
		icon: dataEmpty,
		text: '空空如也',
		showAction: true,
		actionText: '去登陆/注册 >>',
	});
	const getCurrentItem = (item) => {
		emit('getCurrentItem', item);
	};
</script>

<style lang="scss" scoped>
	.print {
		height: 314rpx;
		background-color: #fff;
		box-shadow: 0px 60rpx 20rpx -50rpx rgba(18, 24, 26, 0.1);
		border-radius: 16rpx;
		padding: 0 24rpx;
		margin: 32rpx 0;
		.head {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0 16rpx 0;

			.code {
				font-weight: 400;
				font-size: 26rpx;
				color: #111111;
			}

			.time {
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
			}
		}

		.line {
			border-bottom: 1rpx solid #e7e7e8;
		}

		.body {
			display: flex;

			.goodsPic {
				width: 208rpx;
				height: 208rpx;
				background: #12181a;
				box-shadow: 0px 26rpx 12rpx -20rpx rgba(18, 24, 26, 0.2);
				border-radius: 16rpx;
				margin: 16rpx 0;
			}

			.box {
				display: flex;
				flex-direction: column;
				flex-grow: 1;
				padding: 28rpx 0 28rpx 28rpx;

				.mid {
					.name {
						font-weight: 500;
						font-size: 32rpx;
						color: #111111;
					}

					.code {
						font-weight: 400;
						font-size: 26rpx;
						color: #666666;
					}
				}

				.footer {
					display: flex;
					justify-content: space-between;
					margin-top: 32rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #666666;
				}
			}
		}
	}
</style>
